<template>
	<div class="app-container">
		<el-form :model="data.info" :rules="data.rules" :label-width="language == 'en' ? '155' : '100px'" class="w-1/2"
			ref="ruleFormRef">

			<el-form-item :label="$t('source.name') + ':'" prop="title">
				<el-input v-model="data.info.title" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('source.type') + ':'" prop="type">
				<el-select v-model="data.info.type" size="large" @change="settype">
					<el-option :label="$t('public.picture')" :value="1" />
					<el-option :label="$t('source.video')" :value="2" />
					<el-option :label="$t('source.audio')" :value="3" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('source.upload') + ':'" prop="file_path">
				<el-input v-model="data.info.file_path" type="text" readonly>
					<template #append>
						<Upload :list="{ 'data': 'adv', 'list': false }" :type="data.info.type" :uptype="2"
							@exposeData="expose" />
					</template>
				</el-input>
			</el-form-item>

			<el-form-item :label="$t('machine.custom.material') + ':'" prop="file_path" v-if="data.info.file_path != ''">
				<div v-if="data.info.type == 1" class="flex justify-center">
					<el-image class="max-w-40 max-h-40" :src="data.info.file_path" fit="fill" />
				</div>
				<div v-if="data.info.type == 2" class="max-w-40">
					<Video :url="data.info.file_path" :control="false" />
				</div>
				<div v-if="data.info.type == 3" class="max-w-40">
					<audio :src="data.info.file_path" controls controlsList="nodownload" />
				</div>
			</el-form-item>

			<el-form-item :label="$t('source.length') + ':'" prop="length" v-if="data.info.type != 3">
				<el-input v-model="data.info.length" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('source.width') + ':'" prop="width" v-if="data.info.type != 3">
				<el-input v-model="data.info.width" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('source.materialSize') + ':'" prop="size">
				{{ getFileSizeUnit(data.info.size) }}
			</el-form-item>

			<el-form-item :label="$t('source.desc') + ':'" prop="desc">
				<el-input v-model="data.info.desc" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<div class="w-full text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>


		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Upload from '@/components/Upload/index.vue';
import Video from '@/components/Video/index.vue';
import { addresource } from '@/api/advment';
import { useRouter } from "vue-router";
import { getFileSizeUnit } from '@/utils';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
let router = useRouter()

let data = reactive({
	info: { // 主体信息
		title: '',
		type: 1,
		file_path: '',
		length: '',
		width: '',
		size: '',
		file_name: '',
		desc: ''
	},
	img_info: {}, // 保留上传的图片信息
	vid_info: {}, // 保留上传的视频信息
	original: {}, // 原始数据
	rules: {
		// 表单验证
		title: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		file_path: { required: true, message: $t('message.pleaseUpload'), trigger: 'blur' },
		length: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' },
		width: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' }
	},
})

data.original = JSON.stringify(data.info)

// 上传返回
let expose = (e) => {
	if (e.status == 200) {
		if (data.info.type == 1) {
			data.img_info = {
				file_path: e.file.response.data,
				size: e.file.size,
				file_name: e.file.raw.name
			}
		} else {
			data.vid_info = {
				file_path: e.file.response.data,
				size: e.file.size,
				file_name: e.file.raw.name
			}
		}
		settype(data.info.type)
	} else {
		data.info.file_path = '';
		data.info.size = '';
		data.info.file_name = '';
	}
};

// 切换素材类型
let settype = (e) => {
	let obj = ''
	if (e == 1) {
		obj = data.img_info
	} else {
		obj = data.vid_info
	}
	data.info.file_path = obj.file_path || ''
	data.info.size = obj.size || ''
	data.info.file_name = obj.file_name || ''
}

// 保存
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			addresource(data.info).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.addSuccess'),
						type: 'success'
					});
					router.back()
					return;
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				});
			});
		}
	})
}

// 取消
let cancell = () => {
	data.img_info = {}
	data.vid_info = {}
	data.info = JSON.parse(data.original)
	router.back()
}


</script>
